<template>
  <div id="Tinymce">
    <editor v-model="content" :init="setting" initial-value="Welcome to TinyMCE Vue" />
  </div>
</template>
  
<script>
// 文档：https://www.tiny.cloud/docs/tinymce/6/vue-ref/#output-format
import 'tinymce'
// 样式
import 'tinymce/skins/content/default/content.min.css'
import 'tinymce/skins/ui/oxide/skin.css'
import 'tinymce/skins/ui/oxide/content.min.css'

// icon
import 'tinymce/icons/default/icons'

import 'tinymce/models/dom/index'

// 主题
import 'tinymce/themes/silver'

// 插件
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/autolink'
// import 'tinymce/plugins/autoresize'
import 'tinymce/plugins/autosave'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/code'
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/directionality'
import 'tinymce/plugins/emoticons'
import 'tinymce/plugins/emoticons/js/emojis'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/help'
import 'tinymce/plugins/image'
import 'tinymce/plugins/importcss'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/link'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/media'
import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/quickbars'
import 'tinymce/plugins/save'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/table'
import 'tinymce/plugins/template'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/wordcount'

// 语言
import './static/js/zh_CN.js'

import Editor from '@tinymce/tinymce-vue'
import { computed, onMounted, ref } from 'vue'

export default {
  name: 'app',
  props: {
    setting: {
      type: Object,
      default: {}
    },
    modelValue: {
      type: String,
      default: "",
    },
  },
  emits: ['init', 'update:modelValue'],
  components: {
    'editor': Editor
  },
  setup(props, { emit: $emit }) {

    const setting = ref({
      language: 'zh_CN',
      menubar: 'favs file edit view insert format tools table help',
      plugins: [
        'advlist',
        'anchor',
        'autolink',
        // 'autoresize',
        'autosave',
        'charmap',
        'code',
        'codesample',
        'directionality',
        'emoticons',
        'fullscreen',
        'help',
        'image',
        'importcss',
        'insertdatetime',
        'link',
        'lists',
        'media',
        'nonbreaking',
        'pagebreak',
        'preview',
        'quickbars',
        'save',
        'searchreplace',
        'table',
        'template',
        'visualblocks',
        'visualchars',
        'wordcount',
      ],
      toolbar:
        ' undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image table | fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat | paste',
      height: "600px",
      skin: false,
      content_css: false,
      ...props.setting,
      // 图片上传处理 images_upload_handler需要return一个promise对象
      images_upload_handler: (blobInfo, progress) => {
        return new Promise((resolve, reject) => {
          
        // 通过接口装换成在线路径
        // api.uploader(blobInfo.blob()).then(img => {
        //   resolve(img)
        // })
        
        // 转换成base64
        const img = "data:image/jpeg;base64," + blobInfo.base64();
        resolve(img);

        })
      },
      setup: (editor) => {
        editor.on('init', (event) => {
          $emit('init', event)
        })
      }
    })

    const content = computed({
      get() {
        return props.modelValue
      },
      set(newValue) {
        $emit('update:modelValue', newValue)
      }
    })

    return {
      content,
      setting
    }

  }
}
</script>